<template>
  <div class="chat-list">
    <div
      class="chat-list__item"
      :class="{
        'current': currentChat === item.id
      }"
      v-for="item in chatList"
      :key="item.id"
      @click="SetCurrent(item.id)">
      <div class="item-avatar">
        <el-badge :value="8">
          <el-avatar
            shape="square"
            :size="35"
            :src="item.avatar">
          </el-avatar>
        </el-badge>
      </div>
      <div class="item-content">
        <div class="item-content__info">
          <div class="info-name">{{item.nickname}}</div>
          <div class="info-time">2023/04/12</div>
        </div>
        <div class="item-content__message">
          {{ item.messages.length > 0 ? item.messages[item.messages.length - 1].msgContent : '' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['currentChat', 'chatList'])
  },
  methods: {
    ...mapActions([
      'SetCurrent'
    ])
  }
}
</script>

<style lang="less" scoped>
.chat-list {
  &__item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    cursor: pointer;
    background-color: #fff;
    &:hover, &:active, &.current {
      background-color: #DEDEDE;
    }
    .item-avatar {
      margin-right: 10px;
    }
    .item-content {
      flex: 1;
      width: 0;
      &__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #333;
        .info-name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .info-time {
          color: #999;
          font-size: 12px;
          margin-left: 15px;
        }
      }
      &__message {
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
